$color-main: #3CAA72;
$z-self-msg: 10;
$z-left: 9;
$border: 1px solid #E8E8E8;

.imconfig-style-container{
	::-webkit-scrollbar{
		width:2px;
	}
	::-webkit-scrollbar-track-piece{
		background-color: $color-main + #895367;
	}
	::-webkit-scrollbar-thumb{
		background-color: $color-main;
	}
	::-webkit-scrollbar-thumb:vertical:hover{
		background-color: $color-main;
	}
	::-webkit-scrollbar-thumb:horizontal:hover{
		background-color: $color-main + #222;
	}
	/* 主控板 */
	.imconfig-style-main{
		//box-shadow: inset 0 0 1px $color-main;
		position: relative;
		min-width: 300px;
		width: 100%;
		min-height: 300px;
		height: auto;
		$control-height: 24px;
		$left-width: $control-height/3*4;
		/* 头部控制条 */
		.imconfig-style-control{
			background-color: $color-main;
			height: $control-height;
			.imconfig-style-control-count{
				color: #FFF;
				font-size: 12px;
				padding-left: 34px;
				line-height: $control-height;
			}
		}
		/* 用户信息 */
		.imconfig-style-self-msg{
			overflow: hidden;
			word-break: break-all;
			border: 1px solid $color-main;
			position: absolute;
			z-index: $z-self-msg;
			top: $control-height/6;
			left: $control-height/6;
			width: $control-height;
			border-radius: $control-height/2;
			background-color: $color-main + #222;
			height: $control-height;
			cursor: pointer;
			background-size: 100% 100%;
			color: transparent;
			background-repeat: no-repeat;
			font-size: 12px;
			-webkit-transition: all .25s ease;
			   -moz-transition: all .25s ease;
			    -ms-transition: all .25s ease;
			     -o-transition: all .25s ease;
			        transition: all .25s ease;
			&:hover{
				$width: $control-height*2;
				width: 64px;
				height: 64px;
				box-shadow: 0 0 6px #4E4E4E;
				color: #FFF;
				text-shadow: 1px 1px 1px #000;
			}
		}
		/* 左边 */
		.imconfig-style-left{
			z-index: $z-left;
			background-color: $color-main + #895367;
			width: $left-width;
			bottom: 0;
			top: $control-height;
			position: absolute;
		}
		/* 聊天区 */
		.imconfig-style-content{
			background-color: #FFF;
			position: absolute;
			top: $control-height;
			left: $left-width;
			right: 0;
			bottom: 0;
			$input-height: 100px;
			$control-height: 24px;
			border-right: $border;
			border-bottom: $border;
			.imconfig-style-content-ul{
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: $input-height + $control-height;
				overflow: auto;
				.imconfig-style-msgli{
					line-height: 20px;
					font-size: 14px;
					margin: 6px 2px 6px 2px;
					max-width: 100%;
					width: auto;
					position: relative;
					-webkit-transition: all .25s ease;
					   -moz-transition: all .25s ease;
					    -ms-transition: all .25s ease;
					     -o-transition: all .25s ease;
					        transition: all .25s ease;
					&:before, &:after{
						display: table;
					    line-height: 0;
					    content: "";
					}
					&:after{
						clear: both;
					}
					.imconfig-style-msgli-img{
						overflow: hidden;
						word-break: break-all;
						color: transparent;
						width: 24px;
						height: 24px;
						background-size: 100% 100%;
						background-repeat: no-repeat;
						position: absolute;
						font-size: 12px;
						left: 4px;
						box-shadow: 1px 1px 1px #999;
						border-radius: 4px;
						cursor: pointer;
						z-index: 1;
						-webkit-transition: all .25s ease;
						   -moz-transition: all .25s ease;
						    -ms-transition: all .25s ease;
						     -o-transition: all .25s ease;
						        transition: all .25s ease;
						&:hover{
							width: 60px;
							height: 60px;
							padding: 2px;
							z-index: 2;
							box-shadow: 0 0 2px #4E4E4E;
							color: #FFF;
							text-shadow: 1px 1px 1px #000;
						}
					}
					.imconfig-style-msgli-msg{
						float: left;
						background-color: #F1F1F1;//$color-main + #895367;
						color: #555;
						padding: 2px 4px;
						margin-left: 36px;
						word-break: break-all;
						border-radius: 4px;
						box-shadow: 1px 1px 1px #999;
					}
					&.imconfig-style-self-msgli{
						.imconfig-style-msgli-img{
							right: 4px;
							left: auto;
						}
						.imconfig-style-msgli-msg{
							float: right;
							margin-right: 36px;
							margin-left: auto;
						}
					}
				}
			}
			.imconfig-style-content-control{
				position: absolute;
				bottom: $input-height;
				left: 0;
				right: 0;
				height: $control-height;
				background-color: #f5f5f5;
				border-top: $border;
				.imconfig-style-control-lock{
					font-size: 12px;
					color: #FFF;
					position: absolute;
					right: 4px;
					top: 4px;
					height: 16px;
					line-height: 16px;
					width: 34px;
					padding: 0 5px;
					border-radius: 10px;
					background-color: $color-main + #333;
					cursor: pointer;
					box-shadow: 1px 1px 1px $color-main;
					-webkit-transition: all .25s ease;
					   -moz-transition: all .25s ease;
					    -ms-transition: all .25s ease;
					     -o-transition: all .25s ease;
					        transition: all .25s ease;
					.imconfig-style-control-lock-i{
						box-shadow: 1px 1px 1px $color-main;
						position: absolute;
						width: 12px;
						height: 12px;
						background-color: $color-main;
						border-radius: 10px;
						right: 2px;
						top: 2px;
						-webkit-transition: all .25s ease;
						   -moz-transition: all .25s ease;
						    -ms-transition: all .25s ease;
						     -o-transition: all .25s ease;
						        transition: all .25s ease;
					}
					&:hover{
						background-color: $color-main + #222;
						.imconfig-style-control-lock-i{
							background-color: $color-main - #111;
						}
					}
					&.imconfig-style-control-lock-active{
						background-color: #eee;
						box-shadow: 1px 1px 1px #555;
						padding-left: 15px;
						width: 24px;
						color: #999;
						.imconfig-style-control-lock-i{
							right: 30px;
							box-shadow: 1px 1px 1px #555;
							background-color: #bbb;
						}
					}
				}
			}
			.imconfig-style-content-input{
				position: absolute;
				bottom: 0;
				left: 0;
				right: 0;
				height: $input-height;
				.imconfig-style-edit{
					-webkit-user-modify: read-write-plaintext-only;
					position: absolute;
					left: 0;
					right: 0;
					top: 0;
					bottom: 0;
					padding: 6px;
					overflow-y: auto;
				    word-break: normal;
				    word-wrap: break-word;
				    outline: none;
				    color: #555;
				    &:focus{
				    	border: none;
				    }
				}
				.imconfig-style-input-submit{
					position: absolute;
					z-index: 1;
					bottom: 4px;
					right: 4px;
					width: 24px;
					height: 24px;
					background-color: $color-main + #895367;
					border-radius: 50%;
					cursor: pointer;
					box-shadow: 1px 1px 1px $color-main;
					-webkit-transition: all .25s ease;
					   -moz-transition: all .25s ease;
					    -ms-transition: all .25s ease;
					     -o-transition: all .25s ease;
					        transition: all .25s ease;
					&:hover{
						box-shadow: 0 0 8px $color-main;
						-webkit-transform: scale(1.2);
						   -moz-transform: scale(1.2);
						    -ms-transform: scale(1.2);
						     -o-transform: scale(1.2);
						        transform: scale(1.2);
					}
					&.imconfig-style-input-submit-active{
						-webkit-transform: scale(1.4);
						   -moz-transform: scale(1.4);
						    -ms-transform: scale(1.4);
						     -o-transform: scale(1.4);
						        transform: scale(1.4);
					}
					&.imconfig-style-input-submit-forbid{
						-webkit-transform: scale(0.2);
						   -moz-transform: scale(0.2);
						    -ms-transform: scale(0.2);
						     -o-transform: scale(0.2);
						        transform: scale(0.2);
					}
				}
			}
		}
	}
	.imconfig-style-clearfix{
		clear: both;
	}
}